package com.leil.project

import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.DrawerState
import androidx.compose.material.ModalDrawer
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.material3.rememberDrawerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalWindowInfo
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.toSize
import kotlinx.coroutines.launch
import org.jetbrains.compose.splitpane.HorizontalSplitPane
import org.jetbrains.compose.splitpane.VerticalSplitPane
import org.jetbrains.compose.splitpane.rememberSplitPaneState

import androidx.compose.material.rememberDrawerState
import androidx.compose.material.DrawerValue
import androidx.compose.ui.unit.IntOffset

//import androidx.compose.material3

@Composable
fun DrawerWithSplitPane(expandedPercentage: Float, drawerMinWidthDp: Dp) {

    println("expandedPercentage::$expandedPercentage")
    var splitState = rememberSplitPaneState(
        initialPositionPercentage = 1f
    )

    var expanded by remember { mutableStateOf(false) }

    var drawerMinWidth by remember { mutableStateOf(0.dp) }
    var animationFinished by remember { mutableStateOf(true) }
    val positionPercentageValue by animateFloatAsState(
        targetValue = if (expanded) 0.7f else 1f,
        finishedListener = {
            animationFinished = true
        }
    )
    splitState.positionPercentage = positionPercentageValue
    LaunchedEffect(expanded) {
        // 只要expanded有变化，一定伴随着动画
        animationFinished = false
    }

    LaunchedEffect(animationFinished, expanded) {
        if (animationFinished) {
            if (expanded) {
                drawerMinWidth = drawerMinWidthDp
            } else {
                drawerMinWidth = 0.dp
            }
        }
    }

    println("drawerMinWith::$drawerMinWidth")

//    println("positionPercentageValue::$positionPercentageValue")

    HorizontalSplitPane(
        modifier = Modifier.fillMaxSize(),
        splitPaneState = splitState
    ) {
        first(600.dp) {
            Box(modifier = Modifier.background(Color.Red).fillMaxSize()) {
                Button(
                    modifier = Modifier.align(Alignment.Center),
                    onClick = {
                        expanded = !expanded
                    }
                ) {
                    Text("Toggle")
                }
            }
        }
        second() {
            Box(modifier = Modifier.background(Color.Blue).fillMaxHeight().width(300.dp))
        }
    }
}

@Composable
fun HorizontalSplitPaneDemo() {
    var splitState = rememberSplitPaneState(
        initialPositionPercentage = 1f
    )
    var expanded by remember { mutableStateOf(false) }
    LaunchedEffect(expanded) {
        if (expanded) {
            splitState.positionPercentage = 0.6f
        } else {
            splitState.positionPercentage = 1f
        }
    }

    HorizontalSplitPane(
        modifier = Modifier.fillMaxSize(),
        splitPaneState = splitState
    ) {
        first(400.dp) {
            Box(modifier = Modifier.background(Color.Red).fillMaxHeight().fillMaxWidth()) {
                Button(onClick = {
                    expanded = !expanded
                }) { Text(if (expanded) "hide drawer" else "show drawer") }
            }
        }
        second(if (expanded) 200.dp else 0.dp) {
            Box(modifier = Modifier.background(Color.Blue).fillMaxHeight().fillMaxWidth())
        }
    }
}


@Composable
fun DynamicSplitPaneExample() {
    // 1. 定义一个可变状态来控制分割位置
//    var splitPosition by remember { mutableStateOf(0.5f) }

    val splitPaneState = rememberSplitPaneState()
    Column(modifier = Modifier.fillMaxSize()) {
        // 2. 使用 rememberSplitPaneState 并将状态作为参数传入

        // 3. 将 state 传递给 SplitPane
        VerticalSplitPane(
            modifier = Modifier.weight(1f),
            splitPaneState = splitPaneState
        ) {
            first() {
                // 第一个 Panel
                Box(Modifier.fillMaxSize().background(Color.Red).padding(16.dp)) {
                    Text("Panel A", style = MaterialTheme.typography.headlineLarge)
                }
            }
            second() {
                // 第二个 Panel
                Box(Modifier.fillMaxSize().background(Color.Blue).padding(16.dp)) {
                    Text("Panel B", style = MaterialTheme.typography.headlineLarge)
                }
            }
        }

        // 4. 通过滑块动态改变状态
        Slider(
            value = splitPaneState.positionPercentage,
            onValueChange = {
                splitPaneState.positionPercentage = it
            },
            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
            valueRange = 0.1f..0.9f
        )
    }
}


@Composable
fun RightSideDrawerDemo() {
    val drawerOpen = remember { mutableStateOf(false) }
    val drawerWidth = 280.dp
    val offsetX by animateDpAsState(
        if (drawerOpen.value) 0.dp else drawerWidth,
        label = "drawerSlide"
    )

    Box(Modifier.fillMaxSize()) {
        // 主内容
        Column(Modifier.fillMaxSize().padding(16.dp)) {
            Text("Main Content")
            Spacer(Modifier.height(16.dp))
            Button(onClick = { drawerOpen.value = !drawerOpen.value }) {
                Text(if (drawerOpen.value) "Close Drawer" else "Open Drawer")
            }
        }

        // 半透明遮罩（只在抽屉打开时显示）
        if (drawerOpen.value) {
            Box(
                Modifier
                    .fillMaxSize()
                    .background(Color.Black.copy(alpha = 0.5f)) // 半透明黑色
                    .clickable { drawerOpen.value = false }     // 点击关闭抽屉
            )
        }


        // 右侧抽屉
        Box(
            Modifier
                .align(Alignment.CenterEnd)
                .width(drawerWidth)
                .fillMaxHeight()
                .offset { IntOffset(offsetX.roundToPx(), 0) }
                .background(Color(0xFFE0E0E0))
                .padding(16.dp)
        ) {
            Column {
                Text("Right Drawer Panel", style = MaterialTheme.typography.titleMedium)
                Spacer(Modifier.height(8.dp))
                Text("这里可以放业务逻辑相关的内容，比如筛选条件、详情信息等")
            }
        }
    }
}


